<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div{
            background-color: transparent;
        } */
    </style>
</head>

<body>
    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        function tc() {
            this.style.backgroundColor = 'pink'
        }
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var lis = document.querySelectorAll('li')
        // lis[0].addEventListener('click', tc)
        // lis[1].addEventListener('click', function(){
        //     this.style.backgroundColor = 'pink'
        // })
        // lis[2].addEventListener('click', function(){
        //     this.style.backgroundColor = 'pink'
        // })
        // lis[3].addEventListener('click', function(){
        //     this.style.backgroundColor = 'pink'
        // })
        // lis[4].addEventListener('click', function(){
        //     this.style.backgroundColor = 'pink'
        // })
        // 实现了 麻烦
        // 用循环  简单  不是麻烦是浪费
        // for(var i = 0; i < lis.length; i++){
        //     lis[i].addEventListener('click', function(){
        //         console.log(lis[i]);
        //         lis[i].style.backgroundColor = 'pink'
        //     })
        // }
        // console.log(i);
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function () {
            // this.style.backgroundColor = 'pink'
            // 哪个儿子触发的事件
            var event = event || window.event
            // console.log(event.target);
            // 我不想这样，其他不变红只有我变红
            // 排他思想
            // 大家都变白
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = 'transparent'
            }
            event.target.style.backgroundColor = 'pink'
        })
    </script>
</body>

</html>